<template>
  <div class="hello">
    <MENU></MENU>
    <el-main class="container">
      <div><h1>词汇海报生成</h1></div>
      <div class="row">
        <span style="font-size: 25px">第几天：</span>
        <input style="width: 250px;height: 40px;margin-top: -5px" v-model="day">
      </div>
      <div class="row">
        <span style="font-size: 25px">主题句：</span>
        <input style="width: 250px;height: 40px;margin-top: -5px" v-model="example">
      </div>
      <div style="width: 100%;float: left">
        <el-button size="middle" @click="addnode"
                   style="color: white;font-size: 20px;float:left;background-color: lightblue">添加单词
        </el-button>
        <el-button size="middle" @click="download"
                   style="color: white;font-size: 20px;float:left;background-color: lightblue">下载
        </el-button>
      </div>
      <el-dialog width="450px" :visible.sync="show" style="margin-left: 20%">
        <el-row style="width: 90%;display: flex;margin: 20px auto">
          <span style="font-size: 18px;">拼音：</span>
          <textarea style="width:300px;margin-top: -10px " v-model="word.pingyin"></textarea>
        </el-row>
        <el-row style="width: 90%;display: flex;margin: 50px auto">
          <span style="font-size: 18px;">单词：</span>
          <textarea style="width:300px;margin-top: -10px " v-model="word.name" @blur="word_change($event.target.value)"></textarea>
        </el-row>
        <el-row style="width: 90%;display: flex;margin: 50px auto">
          <span style="font-size: 18px;">词性：</span>
          <textarea style="width:300px;margin-top: -10px " v-model="word.quality"></textarea>
        </el-row>
        <el-row style="width: 90%;display: flex;margin: 50px auto">
          <span style="font-size: 18px;">解释：</span>
          <textarea style="width:300px;margin-top: -10px " v-model="word.definition"></textarea>
        </el-row>
        <el-button size="small" style="margin: 20px auto;background-color: lightblue;color: white" @click="save">保存
        </el-button>
      </el-dialog>
      <div style="width: 100%;font-size: 25px;float: left;text-align: left;margin-top: 30px">单词列表</div>
      <div style="width: 100%;font-size: 25px;float: left;text-align: left;margin-top: 30px;font-weight: bold"
           v-if="wordlist.length === 0">未添加任何单词
      </div>
      <div v-for="(i,v) in wordlist" style="width: 100%;float: left" :key="v">
        <div
          style="width: 20%;float: left;background-color: whitesmoke;margin-top:20px;border-radius: 20px;padding: 30px">
          <i class="el-icon-close" style="font-size: 20px;float: right" v-on:click="deleteWord(v)"></i>
          <div style="width: 100%;font-size: 20px;text-align: left;margin-top: 20px">拼音：{{i.pingyin}}</div>
          <div style="width: 100%;font-size: 20px;text-align: left">单词：{{i.name}}</div>
          <div style="width: 100%;font-size: 20px;text-align: left">词性：{{i.quality}}</div>
          <div style="width: 100%;font-size: 20px;text-align: left">解释：{{i.definition}}</div>
        </div>
      </div>
    </el-main>
    <div ref="canvas" class="canvas">
      <img src='../assets/logo.png' width="235" alt="logo背景">
      <p class="vocabulary">词 汇</p>
      <p class="example">{{example}}</p>
      <div class="vocabularyList">
        <div class="vocabularyInfo" v-for="(i) in wordlist">
          <p style="position: relative;flex: 1;">
            <span class="pinyin" style="font-size: 15px;position: absolute;top:2px;">{{i.pingyin}}</span>{{i.name}}
          </p>
          <p style="flex: 1;color:rgb(58, 96, 219) ">{{i.quality}}</p>
          <p style="flex: 3">{{i.definition}}</p>
        </div>
      </div>
      <p style="padding: 15px;font-size: 20px;color: rgb(171,183,221);font-family:Helvetica Neue">DAY <span class="day">{{day}}</span>
      </p>
    </div>
  </div>
</template>

<script>

  import html2canvas from 'html2canvas'
  import navbar from './navbar'
  import CanvasDraw from '../js/canvas_util'
  import pinyin_util from '../js/pinyin_util'

  export default {
    name: 'HelloWorld',
    components: {
      MENU: navbar
    },
    data() {
      return {
        list: [{contentType: '', number: ''}],
        show: false,
        word: {
          pingyin: '',
          name: '',
          quality: '',
          definition: ''
        },
        example: "",
        day: "",
        wordlist: [],
      }
    },
    methods: {
      addnode() {
        this.show = true
        this.word.definition = ""
        this.word.quality = ""
        this.word.name = ""
        this.word.pingyin = ""
      },
      deleteWord(index) {
        var list = this.wordlist
        list.splice(index, 1)
      },
      save() {
        let definitions = this.word.definition.split("\n");
        let qualitys = this.word.quality.split("\n");
        let names = this.word.name.split("\n");
        let pingyins = this.word.pingyin.split("\n");

        for (var i = 0; i < definitions.length; i++) {
          var obj = {
            pingyin: pingyins[i],
            name: names[i],
            quality: qualitys[i],
            definition: definitions[i],
          }
          this.wordlist.push(obj)
        }
        this.show = false
      },
      download() {
        let canvasDraw = new CanvasDraw()
        html2canvas(this.$refs.canvas).then((canvas) => {
          canvasDraw.download_canvas(canvas)
        });
      },
      word_change(value){
        pinyin_util.get_pinyin(value).then(pinyin=>{
          this.word.pingyin=pinyin
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html, body, .hello {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .container {
    position: absolute;
    width: 85%;
    height: 100%;
    left: 15%;
  }

  .row {
    width: 100%;
    height: 80px;
    float: left;
    display: flex;
    margin-top: 50px;
  }

  .row1 {
    width: 100%;
    height: 30px;
    float: left;
    display: flex;
    margin-top: 40px;
  }

  .words {
    width: 80%;
    margin-top: 50px;
    margin-left: 17%;
  }

  canvas, .canvas {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 710px;
    transform: translate(0%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(239, 247, 254);
  }

  .canvas img {
    padding: 20px;
  }

  .canvas .vocabulary {
    font-size: 30px;
    background: rgb(58, 96, 219);
    color: #fff;
    padding: 5px 20px;
    border-radius: 10px;
    margin: 0;
  }

  .canvas .example {
    font-size: 30px;
    background: #fff;
    color: rgb(58, 96, 219);
    border-radius: 35px;
    padding: 15px 70px;
  }

  .canvas .vocabularyList {
    width: 85%;
    font-size: 30px;
    background: #fff;
    border-radius: 35px;
    padding: 20px;
  }

  .canvas .vocabularyList .vocabularyInfo {
    display: flex;
    flex-direction: row;
    margin: 0;
  }

  .canvas .vocabularyList .vocabularyInfo p {
    margin: 0;
    padding: 15px 0;
  }
</style>
